<template>
	<view class="fod_box" v-if="value ? true : false">
		<view class="bg-mask" @click="cancelSelectRegion"></view>
		<view :class="['region-select', value ? 'animation' : '']">
			<view class="hd">
				<view class="region-selected">
					<view :class="['item', !item.pk_id ? 'disabled' : '', regionLevel - 1 === index ? 'selected' : '']"
						v-for="(item, index) in selectRegionList" @click="selectRegionLevel(index, item)" :key="index">
						{{ item.name }}
					</view>
				</view>
				<view :class="['done', selectRegionList[maxLevel - 1].pk_id ? '' : 'disabled']" @click="doneSelectRegion">确定</view>
			</view>
			<view class="region-list">
				<scroll-view scroll-y class="bd">
					<view :class="['item', selectRegionList[regionLevel - 1].pk_id == item.pk_id ? 'selected' : '']"
						@click="selectRegion(item)" v-for="(item, index) in dataList" :key="index">
						{{ item.name }}
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 组件的属性列表
	 * submit:点击遮罩层关闭弹窗 或者 确定提交获取到编码
	 */
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},// 是否显示
			areaCode: {
				type: String,
				default: ''
			},
			maxLevel:{
				type:Number,
				default:3
			},// 可选范围 1省 2:市 3区,不能响应式修改
		},
		watch: {
			value: {
				handler(val) {
					if (val && !this.dataList[0]) {
						this.isInit = true;
						this.getRegionList(); // 获取第一级区域
					}
				},
				immediate: true
			},
			areaCode: {
				handler(val) {
					if (val && !this.isInit) {
						this.isInit = true;
						this.getInfoByName();
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				isInit: false, // 是否已经初始化
				selectRegionList: [{
				 	pk_id: null,
						name: '省份',
						parent_code: null
					},
					{
						pk_id: null,
						name: '城市',
						parent_code: null
					},
					{
						pk_id: null,
						name: '区县',
						parent_code: null
					}
				], // 三级区域标题
				regionLevel: 1, // 当前显示、选择的省市区级别 1:省 2：市 3：区
				dataList: [], // 当前显示的区域列表
			};
		},
		mounted() {
			if(this.maxLevel < 3){
				this.selectRegionList.splice((this.maxLevel))
			}
		},
		methods: {
			// 获取对应编码下的下一级所有区域
			getRegionList(parentCode) {
				this.$loading();
				let params = {
					parent_code: 86,
					type: 2
				};
				if (parentCode) {
					params.parent_code = parentCode;
				}
				this.$resPost('GetClassificationList', params).then(res => {
					this.dataList = this.dataList.concat(res.data || []);
					this.$hide();
				});
			},
			// 取消选择
			cancelSelectRegion() {
				this.$emit('input', false);
			},
			// 点击确定,提交
			doneSelectRegion() {
				if (!this.selectRegionList[this.maxLevel - 1].pk_id) {
					return false;
				}
				this.$emit('input', false);
				let areaName = this.getFullName(); // 名称+区域编码
				this.$emit('submit', areaName);
			},
			// 点击省/市/区标题
			selectRegionLevel(regionLevelIndex, item) {
				if (regionLevelIndex >= this.regionLevel - 1) {
					//不能大于当前所选的地区级别
					return;
				}
				let selectRegionList = this.selectRegionList;
				if (regionLevelIndex === 0 && this.maxLevel >= 2) {
					selectRegionList[1] = {
						pk_id: null,
						name: '城市',
						parent_code: null
					};
					if(this.maxLevel >= 3){
						selectRegionList[2] = {
							pk_id: null,
							name: '区县',
							parent_code: null
						};
					}
				} else if (regionLevelIndex === 1 && this.maxLevel >= 2) {
					selectRegionList[2] = {
						pk_id: null,
						name: '区县',
						parent_code: null
					};
				}
				this.selectRegionList = selectRegionList;
				this.regionLevel = regionLevelIndex + 1;
				this.dataList = [];

				// 获取当前级别的区域
				this.getRegionList(item.parent_code);
			},
			// 点击选择某一个地区
			selectRegion(regionItem) {
				let regionLevel = this.regionLevel;
				this.selectRegionList.splice(regionLevel - 1, 1, {
					...regionItem
				});
				if (regionLevel < this.maxLevel) {
					this.regionLevel = regionLevel + 1;
					this.dataList = [];
					this.getRegionList(regionItem.pk_id);
				}
			},
			// 获取目前已选的全称(最后还补上区域编码)
			getFullName() {
				let areaName = [];
				let selectRegionList = this.selectRegionList;
				let num = this.regionLevel;
				if (!selectRegionList[this.regionLevel - 1].pk_id) {
					num += -1;
				}
				selectRegionList.every((item, index) => {
					if (index < num) {
						areaName.push(item.name);
						return true;
					} else {
						return false;
					}
				});
				areaName.push(selectRegionList[num - 1].pk_id)
				return areaName.join(',');
			},
			// 初始化标题
			getInfoByName() {
				let selectRegionList = this.selectRegionList;
				this.$loading();
				let regionLevel = 1;
				this.$resPost('GetCommonRegionByName', {
						name: this.areaCode
					})
					.then(({
						data
					}) => {
						if (data[0] && this.maxLevel >= 1) {
							this.selectRegionList.splice(0, 1, {
								...data[0]
							});
							regionLevel = 1;
						}
						if (data[1] && this.maxLevel >= 2) {
							this.selectRegionList.splice(1, 1, {
								...data[1]
							});
							regionLevel = 2;
						}
						if (data[2]  && this.maxLevel >= 3) {
							this.selectRegionList.splice(2, 1, {
								...data[2]
							});
							regionLevel = 3;
						}
						this.regionLevel = regionLevel;

						let areaName = this.getFullName(); // 名称+区域编码
						this.$emit('initName', areaName)
						this.$hide();
						// 获取最后一级的地区
						this.getRegionList(data[regionLevel - 1].parent_code || 86);
					})
					.catch(() => {});
			}
		}
	};
</script>

<style scoped lang="scss">
	@keyframes popup_bottom {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.fod_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
	
	.bg-mask {
			height: 100%;
			width: 100%;
			background: rgba(0, 0, 0, 0.4);
			position: absolute;
			top: 0;
			left: 0;
		}

		.region-select {
			width: 100%;
			background: #fff;
			position: absolute;
			left: 0;
			bottom: 0;

			&.animation {
				animation: 0.5s forwards popup_bottom;
			}

			.hd {
				width: 100%;
				border-bottom: 1px solid #f4f4f4;
				padding: 30rpx 30rpx 0 30rpx;
				display: flex;

				.region-selected {
					flex: 1;
					overflow: hidden;
					height: 60rpx;
					display: flex;

					.item {
						max-width: 200rpx;
						margin-right: 30rpx;
						text-align: left;
						line-height: 60rpx;
						height: 100%;
						color: #333;
						font-size: 28rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.item.disabled {
						color: #999;
					}

					.item.selected {
						border-bottom: 1rpx solid #f05b29;
						color: #f05b29;
					}
				}

				.done {
					float: right;
					height: 60rpx;
					width: 60rpx;
					border: none;
					background: #fff;
					line-height: 60rpx;
					text-align: center;
					color: #333;
					font-size: 28rpx;
				}

				.done.disabled {
					color: #999;
				}
			}

			.region-list {
				height: 500rpx;
				width: 100%;
				overflow: hidden;

				.bd {
					height: 100%;
					width: 100%;
					padding: 0 30rpx;
					overflow: hidden;
				}

				.item {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: left;
					color: #333;
					font-size: 28rpx;
				}

				.item.selected {
					color: #f05b29;
				}
			}
		}
	}
</style>
